<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时日志查看第二版</title>
<style type="text/css">
table thead tr th {
	text-align: center;
}
.line {
	color: white;
	font-size: 13px;
	margin-right:5px; 
}
</style>
<link rel="stylesheet" href="./lib/bootstrap3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="./lib/jquery.js"></script>
<script type="text/javascript"
	src="./lib/bootstrap3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./lib/log.js"></script>
<script type="text/javascript">
	var href = window.location.href;
	var ctx = href.split("index.html")[0];
	var ws = ctx.replace("http","ws") + "/ws/upload?sid=";

	$(function (){
		$("button.connect").on("click", function (){
			console.info("click connect");
			var sid = $("#sid").val();
			if(!sid) {
				alert("请输入sessionId");
				return;
			}
			buttonClickOperation(ws + sid);
		});
	});

</script>
</head>
<body style="margin: 40px;">
	<div class="full-container">
		<div class="row">
			<!-- Single button -->
			<form role="form" class="form-inline">
				<div class="input-group">
					<span class="input-group-addon" id="basic-addon1">选择文件夹：</span> <select
						class="form-control" id="dir" onchange="changeDir();">

					</select>
				</div>
				<!---->
				<input type="text" id="sid" placeholder="sessionId">
				<button type="button" class="btn btn-success pull-right connect">连接</button>
				<button type="button" class="btn btn-success pull-right open">收起表格</button>
			</form>

			<table class="table table-bordered table-hover table-striped">
				<caption></caption>
				<thead>
					<tr class="center">
						<th>序号</th>
						<th>名称</th>
						<th>大小</th>
						<th>修改时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>1</td>
						<td>张三</td>
						<td>1000</td>
						<td>1000</td>
						<td>

							<button type="button" class="btn btn-xs btn-default"
								data-toggle="tooltip" title="查看日志">
								查看<i class="glyphicon glyphicon-eye-open"></i>
							</button>

							<button type="button" class="btn btn-xs btn-info"
								data-toggle="tooltip" title="下载日志">
								下载<i class="glyphicon glyphicon-download"></i>
							</button>
						</td>
					</tr>
				</tbody>
			</table>
			
		</div>
		<hr/>
		<div class="row">
			<div class="panel panel-default">
    			<div class="panel-heading">
			        <h3 class="panel-title">
			            <strong id="detail"></strong> 日志详情 
			            <div class="btn-group btn-group-xs pull-right">
						    <button type="button" class="btn btn-primary" onclick="cleanMsg();">清除控制台</button>
						    <button type="button" class="btn btn-success" onclick="closeWebSocket();">关闭日志连接</button>
						</div>
			        </h3>
			    </div>
			    <div class="panel-body">
			        <div id="filelog-container" style="height: 500px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;">
						    <div id="message">
						    
						    </div>
						</div>
				</div>
			</div>
		</div>
		
	</div>
</body>
</html>